<template>
  <div class="search"
       :style="{backgroundColor:searchBgColor}">
    <img :src="icon"
         class="search-icon">
    <span class="search-hint"
          :style="{color:hintColor}">大前端开发，混合京东商城</span>
  </div>
</template>
<script>
export default {
  props: {
    icon: {
      default: require('@img/search.svg'),
      type: String
    },
    // 搜索字体样式
    hintColor: {
      type: String,
      default: '#999'
    },
    searchBgColor: {
      default: 'red',
      type: String
    }
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
.search {
  background: white;
  width: 100%;
  margin: px2rem(6);
  border-radius: px2rem(22);
  display: flex;
  align-items: center;
  &-icon {
    margin-left: px2rem($marginSize);
    width: px2rem(16);
  }
  &-hint {
    margin-left: px2rem($marginSize);
    font-size: px2rem($minSize);
    color: $hintColor;
  }
}
</style>